<template>
  <div>
    <div class="header">
      <h2 class="header_title">库文件</h2>
      <button
        type="button"
        class="btn btn-sm btn-outline-primary header_add"
        v-on:click="viewItem = 0"
      >
        Add
      </button>
      <button
        type="button"
        class="btn btn-sm btn-outline-secondary header_delete"
        v-on:click="viewItem = 1"
      >
        Delete
      </button>
    </div>
    <hr />
    <div class="my-3 p-3 bg-white rounded shadow-sm">
      <h6 class="border-bottom border-gray pb-2 mb-0">最近添加的库文件</h6>
      <div class="media text-muted pt-3" :key="lib.id" v-for="lib in libs">
        <svg
          class="bd-placeholder-img mr-2 rounded"
          width="32"
          height="32"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
          aria-label="Placeholder: 32x32"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#007bff"></rect>
          <text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
        </svg>
        <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
          <strong class="d-block text-gray-dark">{{lib.name}}</strong>
          {{lib.introduction}}
        </p>
      </div>
      <small class="d-block text-right mt-3">
        <a href="#">All updates</a>
      </small>
    </div>
  </div>
</template>

<script>
export default {
  name: "DashboardProjects",
  props: {},
  data: function () {
    return {
      libs: [
        {
          id: 1,
          name: "基础高校库",
          introduction: "包含了常用高校的节点信息",
        },
        {
          id: 2,
          name: "基础工厂库",
          introduction: "包含了常用工厂的节点信息",
        },
        {
          id: 3,
          name: "拓展高校库",
          introduction: "包含了拓展高校的节点信息",
        },
      ],
    };
  },
};
</script>

<style scoped>
.header {
  height: 50px;
  position: relative;
}
.header_title {
  top: 10px;
  position: absolute;
}
.header_add {
  top: 18px;
  right: 50px;
  width: 60px;
  position: absolute;
}
.header_delete {
  top: 18px;
  right: 120px;
  width: 60px;
  position: absolute;
}
</style>